<script lang="ts" setup>
import LaudIcon from "@/components/icon/LaudIcon.vue";
import CommentIcon from "@/components/icon/CommentIcon.vue";
import { homeStoriesStore } from "../../store";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const store = homeStoriesStore();
const { commentCount } = storeToRefs(store);

const show = ref(false);
const limitNum = ref(500);
let text = ref('');

function showPopup() {
    show.value = true;
}

function changeText(e: any) {
    if (text.value.length < limitNum.value) {
        text.value = e.target.value
    }
    else {
        text.value = text.value.substring(0, limitNum.value);
    }
}

function sendComment() {
    console.log(text.value);
    text.value = ''
}
</script>

<template>
    <div class="fixed bottom-0 h-24 w-screen flex justify-between px-8 bg-gray-50 ">
        <form>
            <input class="border border-gray-400 mt-5 px-5 py-3 rounded-lg" type="text" placeholder="写一个评论..."
                @click="showPopup">
        </form>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" class="px-8 pt-10 ">

            <textarea class="textarea" name="text" cols="55" rows="6" placeholder="在这里写下你想说的" v-model="text"
                @input="changeText"></textarea>

            <div>{{ text.length }} / {{ limitNum }} </div>
            <van-button size="small" color="#aaa" type="default" class="float-right" @click="sendComment">发表
            </van-button>
        </van-popup>
        <div class="flex">
            <LaudIcon :countNum="123" />
            <CommentIcon :countNum="commentCount" class="ml-5" />
        </div>
    </div>
</template>

<style>
.textarea {
    resize: none;
}
</style>

